<template>
    <div class="content">

      <!-- <el-row :gutter="12">
      <el-col class="flex" :span="3">
            <el-card shadow="always">
              总金额 :721222 
    </el-card>
          </el-col>
          <el-col class="flex" :span="3 ">
            <el-card shadow="always">
              待结算 :22 
    </el-card>
          </el-col>
          </el-row> -->
        <div  class="flex">

                <el-col class="flex" :span="7">
            <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> 
          
                <input class="input1"  placeholder="请输入" v-model="search.keyWord" @keydown.13 = "toSearch" type="text">
            </el-col>
                <el-col class="flex  margin50" :span="4 ">
                    <!-- <div  style="width: 50px; line-height: 50px; ">  <span>状态:</span> </div> -->
                    <el-checkbox-group @change="change"  v-model="checkboxStatus">
                        <el-checkbox-button v-for="(city , index) in checkboxGroup1"  :label="city.status" :key="city.name">{{city.name}}</el-checkbox-button>
                </el-checkbox-group>
             </el-col>

             <el-col class="flex  money" :span="4">
                    <!-- <div  style="width: 50px; line-height: 50px; ">  <span>状态:</span> </div> -->
               <span   > 已付款:$ {{totalAmount}}</span>
            
               <span> 待结算:${{toBeSettled}}</span>

          
             </el-col>
             







             <el-col class="flex  " :span="7">
              <el-date-picker 
                  v-model="dateArray" 
                  type="datetimerange" 
                  range-separator="至" 
                  value-format="yyyy-MM-dd HH:mm:ss" 
                  start-placeholder="开始日期" 
                  end-placeholder="结束日期" 
                  :default-time="['00:00:00', '23:59:59']"
                  @change="changeDate" style="width:360px;">
                </el-date-picker>
            </el-col>
             <el-col class="flex  " :span="4">
            <el-button type="primary" icon="el-icon-search"  size="small" @click="toSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
            </el-col>

        </div>
        












        <div>
            <el-table
            height="400"
            v-loading="loading"
    :data="tableData"
    border
    style="width: 100%">

    <el-table-column
    fixed
      prop="orderSn"
      label="订单号"
      width="120">
    </el-table-column>


    <el-table-column
   
      prop="CreateDate"
      label="日期"
      width="150">
          <template slot-scope="scope">
            <div>
                {{scope.row.CreateDate | mytime }} 
            </div>
          </template>



    </el-table-column>




    <el-table-column
      prop="novel.name"
      label="小说名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="actualPrice"
      label="价格"
      width="120">
    </el-table-column>
   
    <el-table-column
      prop="userId.username"
      label="用户"
      width="300">
    </el-table-column>
    <el-table-column
      prop="shareUserId"
      label="代理"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  background
  :page-size=15
  @current-change="searchPage"
  layout="prev, pager, next"
  :total="total">
</el-pagination>
        </div>





    </div>
</template>

<script>
import {orderlist } from '@/api/order'
    export default {
            data() {
                return {
                  options: [{
          value: '0',
          label: '综合搜索'
        }, {
          value: 'orderSn',
          label: '订单'
        }, {
          value: 'shareUserId',
          label: '代理'
        }, 
        
        {
          value: 'userId',
          label: '用户'
        },
        {
          value: 'novel.name',
          label: '小说名'
        },
       ],
        value: '0'
                  
                  
                  
                  
                  ,
// 总金额 待结算
                totalAmount:780,
                toBeSettled:100,


                  dateArray:[],
                  loading:false,
                  total:10,
                  tableData:[],
                    search:{
                        page:1,
                        size:15, 
                        keyWord:"",
                        where:{},
                        AndWhere:{ }
                        // 选范围
                    },
                    checkboxStatus:[],
                    checkboxGroup1:[ {  name:"待付款" , status:0  } , {  name:"已付款" , status:3  }]
                    ,
               
                    
                }
            },
            created() {
              this.rendtable()


            },
        
            methods: {
              // 时间
              changeDate(e){
                  console.log(e);
                  this.search.where['CreateDate'] = e
              },
              toSearch(){
                console.log(123231,"节流");
                    this.rendtable()
              },


              //reset 
              reset(){
                this.search = {
                        page:1,
                        size:15, 
                        keyWord:"",
                        where:{},
                        AndWhere:{ }
                }
                this.checkboxStatus =   this.dateArray = []
           
              },
              searchPage(value){
                //   变换页数
                  this.search.page=value
                  this.rendtable()



              },
                change(value){
                    
                    this.search.AndWhere['status'] =  value
                    this.rendtable()
                },
               async rendtable(){
                    this.loading=true
                    var newSearch  = this.search

                  if(this.value !="0" && this.search.keyWord !="") {
                      let { keyWord , ...arg } =this.search
                      console.log('arg',arg);

                      //  深克隆   为了不影响后续 搜索
                      newSearch=  JSON.parse( JSON.stringify(arg) )
                      console.log('newSearch',newSearch)
                      newSearch.AndWhere[`${this.value}`] = [keyWord]
                  }


                    let result =  await orderlist( newSearch )
                    this.loading=false
                    console.log(result);
                    this.tableData = result.data.list
                    this.totalAmount =  result.data.sum[0].totalAmount
                    this.toBeSettled =  result.data.sum[0].toBeSettled
                    this.total = result.data.pagination.total
                  
                }
            },
    }
</script>

<style lang="scss" scoped>
.content{
    padding: 30px;
}
.flex{
    display: flex;
    align-items: center;
}

// .margin50{
//     margin-left: 20px;
// }
.search{

}
.input1 {
  -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    &:hover{

      border-color:#409eff ;
    }
}


.money{
  font-size: 7px;
  span{
    margin: 0 5px;
  }
}

</style>